<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>后端数据结构测试</title>
    <!-- 引入ElementPlus样式 -->
    <link rel="stylesheet" href="./css/ElementPlus/index.css"/>
    <!-- 引入 Vue 3 -->
    <script src="./js/vue3/index.js"></script>
    <!-- 引入ElementPlus js代码 -->
    <script src="./js/elementplus/index.js"></script>
    <script src="./js/elementplus/icons.js"></script>
    <!-- 引入多媒体预览组件 -->
    <script src="./js/multiPreview.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="./css/multiPreview.css"/>
    <style>
        body {
            margin: 0;
            padding: 20px;
            font-family: Arial, sans-serif;
            background: #f5f5f5;
        }
        .test-container {
            max-width: 1200px;
            margin: 0 auto;
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }
        .grid-container {
            display: flex;
            flex-wrap: wrap;
            align-content:flex-start;
            width: 100%;
            position: relative;
            overflow: auto;
            margin-top: 20px;
        }
        .grid-item {
            cursor: pointer;
            background-color: #fff;
            padding: 20px;
            text-align: center;
            width: 100px;
            height: 152px;
            margin-top: 30px;
            margin-right: 20px;
            line-height: 18px;
            font-size: 12px;
            color: #03081a;
            overflow: hidden;
            word-break: break-all;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: center;
            border: 1px solid #eee;
            border-radius: 8px;
            transition: all 0.3s;
        }
        .grid-item:hover {
            background-color: #eeebeb;
            border-radius: 5px;
            transform: translateY(-2px);
        }
        .grid-item img {
            width: 80px;
            height: 80px;
            border-radius: 10px;
            margin-top: 10px;
        }
        .grid-item span {
            font-size: 12px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            text-align: center;
            word-wrap: break-word;
            overflow-wrap: break-word;
            white-space: normal;
        }
        .time_text {
            margin-top: 10px;
            font-size: 12px;
            color: #ada9a9;
        }
        .api-info {
            background: #fff3cd;
            border: 1px solid #ffeaa7;
            border-radius: 6px;
            padding: 15px;
            margin-bottom: 20px;
        }
        .api-info h3 {
            margin: 0 0 10px 0;
            color: #856404;
        }
        .api-info pre {
            background: #f8f9fa;
            padding: 10px;
            border-radius: 4px;
            overflow-x: auto;
            font-size: 12px;
        }
    </style>
</head>
<body>
<div id="app">
    <div class="test-container">
        <h1>🔗 后端数据结构对接测试</h1>
        
        <div class="api-info">
            <h3>📡 模拟后端响应数据结构</h3>
            <pre>{{
  "code": 200,
  "msg": "获取成功",
  "thisnum": 36,
  "total": 67,
  "data": [
    {
      "id": 94,
      "file_name": "剥离之茧.mp3",
      "type": 6,
      "md5": "c69a0b34173dd6d7e4863c641a0ecd93",
      "url": "http://127.0.0.1:5700/static/CaR2kwWfuGFW4Ea6DLgUvg.mp3",
      "cover": "http://127.0.0.1:5700/static/CaR2kwWfuGFW4Ea6DLgUvg.mp3",
      "size": "3.22MB",
      "create_time": [...],
      "is_delete": 0
    }
  ]
}}</pre>
        </div>

        <div class="grid-container">
            <div class="grid-item" v-for="(item,index) in fileDataList" :key="item.id">
                <img :src="item.cover" @click="openPreview(index)" />
                <span>{{ item.file_name }}</span>
                <div class="time_text">{{ item.size }}</div>
            </div>
        </div>
    </div>
    
    <!-- 多媒体预览组件 -->
    <multi-media-preview 
        :visible="multiPreviewVisible" 
        :files="fileDataList" 
        :current-index="multiPreviewIndex"
        @update:visible="multiPreviewVisible = $event"
        @update:current-index="multiPreviewIndex = $event"
    ></multi-media-preview>
</div>

<script>
const { createApp, ref, onMounted } = Vue;

const App = {
    setup() {
        const multiPreviewVisible = ref(false);
        const multiPreviewIndex = ref(0);
        
        // 模拟后端返回的原始数据（封面会被本地图标覆盖）
        const rawData = [
            {
                id: 94,
                file_name: "剥离之茧.mp3",
                type: 6,
                md5: "c69a0b34173dd6d7e4863c641a0ecd93",
                url: "https://www.soundjay.com/misc/sounds/bell-ringing-05.mp3",
                cover: "http://127.0.0.1:5700/static/CaR2kwWfuGFW4Ea6DLgUvg.mp3", // 后端返回的封面，会被覆盖
                size: "3.22MB"
            },
            {
                id: 95,
                file_name: "美丽风景.jpg", 
                type: 1,
                md5: "d41d8cd98f00b204e9800998ecf8427e",
                url: "https://picsum.photos/800/600?random=1",
                cover: "https://picsum.photos/800/600?random=1", // 图片保持原封面
                size: "2.1MB"
            },
            {
                id: 96,
                file_name: "测试视频.mp4",
                type: 7,
                md5: "e3b0c44298fc1c149afbf4c8996fb924",
                url: "https://www.w3schools.com/html/mov_bbb.mp4",
                cover: "http://127.0.0.1:5700/static/video.mp4", // 后端返回的封面，会被覆盖
                size: "5.6MB"
            },
            {
                id: 97,
                file_name: "轻音乐.mp3",
                type: 6,
                md5: "c69a0b34173dd6d7e4863c641a0ecd94", 
                url: "https://file-examples.com/wp-content/uploads/2017/11/file_example_MP3_700KB.mp3",
                cover: "http://127.0.0.1:5700/static/music.mp3", // 后端返回的封面，会被覆盖
                size: "0.7MB"
            },
            {
                id: 98,
                file_name: "城市夜景.png",
                type: 1,
                md5: "d41d8cd98f00b204e9800998ecf8427f",
                url: "https://picsum.photos/800/600?random=2",
                cover: "https://picsum.photos/800/600?random=2", // 图片保持原封面
                size: "1.8MB"
            },
            {
                id: 99,
                file_name: "文档文件.pdf",
                type: 5,
                md5: "e3b0c44298fc1c149afbf4c8996fb925",
                url: "",
                cover: "http://127.0.0.1:5700/static/doc.pdf", // 后端返回的封面，会被覆盖
                size: "0.5MB"
            }
        ];

        // 模拟原有的图标映射逻辑
        const iconList = [
            { type: 0, img: './resource/img/blank.png' },
            { type: 1, img: '' }, // 图片类型不设置图标
            { type: 2, img: './resource/img/txt.png' },
            { type: 3, img: './resource/img/word.png' },
            { type: 4, img: './resource/img/excel.png' },
            { type: 5, img: './resource/img/pdf.png' },
            { type: 6, img: './resource/img/mp3.png' },
            { type: 7, img: './resource/img/video.png' },
            { type: 8, img: './resource/img/zip.png' }
        ];

        // 处理数据，设置正确的封面图标
        const fileDataList = ref([]);
        
        const processFileData = () => {
            fileDataList.value = [...rawData];
            
            // 模拟原有的封面处理逻辑
            for (let i in fileDataList.value) {
                for (let j in iconList) {
                    const file_i = fileDataList.value[i];
                    const icon_j = iconList[j];
                    if (file_i.type !== 1) { // 非图片文件设置本地图标
                        if (file_i.type === icon_j.type) {
                            file_i.cover = icon_j.img;
                            fileDataList.value[i] = file_i;
                        }
                    }
                }
            }
        };
        
        const openPreview = (index) => {
            console.log('Opening preview for:', fileDataList.value[index]);
            multiPreviewIndex.value = index;
            multiPreviewVisible.value = true;
        };
        
        onMounted(() => {
            processFileData();
            console.log('原始数据:', rawData);
            console.log('处理后数据:', fileDataList.value);
        });
        
        return {
            fileDataList,
            multiPreviewVisible,
            multiPreviewIndex,
            openPreview
        };
    }
};

const app = createApp(App);

// 注册ElementPlus图标
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
    app.component(key, component);
}

// 注册多媒体预览组件
if (window.MultiMediaPreview) {
    app.component('MultiMediaPreview', window.MultiMediaPreview);
    console.log('✅ MultiMediaPreview registered successfully');
} else {
    console.error('❌ MultiMediaPreview component not found');
}

app.use(ElementPlus);
app.mount('#app');
</script>
</body>
</html>